<style>
    .menu-list{
        margin-top: 20px;
        background: #fff;
        box-shadow: 0 0 6px rgba(0, 0, 0, .1) !important;
        border: 1px solid #ddd;
        padding: 20px;
        border-radius: 5px;
    }
    .menu-list li{
        padding-left: 40px;
    }
    .menu-list .menu-c:hover{
        background: #f5f8fa;
    }
    .menu-list ul{
        display: none;
    }
    .menu-list .info{
        cursor: pointer;
        width:100%;
    }
    .menu-list>li li{
        margin-left: 50px;
    }
    .menu-c{
        border-bottom: 1px solid #ddd;
        padding: 15px 0;
        padding-left: 10px;
    }
    .hasChild{
        position: relative;
    }
    .hasChild::before {
        font-family: paperIcons !important;
        content: "\f067";
        position: absolute;
        top: 15px;
        left: 10px;
        font-size: 16px;
    }

    .hasChild::after {
        font-family: paperIcons !important;
        content: "\f068";
        position: absolute;
        top: 15px;
        left: 10px;
        font-size: 16px;
    }
</style>

<ul class="menu-list">
        @php
            
            function recursion($listData,$pid=0){
                $html="";
                foreach ($listData as $item) {
                    if($item->pid==$pid){
                        $child="";
                        //子菜单递归
                        $childData=recursion($listData,$item->id);
                        if($childData){
                            $child='<ul>'.$childData.'</ul>';
                        }
                        
                        //资源路由不需要<创建资源路由按钮>和<编辑按钮>
                       
                        $html.='
                            <li class="is_resource'.$item->is_resource.'">
                                <div class="d-flex menu-c">
                                    <div class="tree-checkbox  mr-2">
                                        <div class="custom-control custom-checkbox" style="top:-16px">
                                            <input type="checkbox" id="delete'.$item->id.'" menuname="'.$item->menu_name.'" class="custom-control-input">
                                            <label class="custom-control-label" for="delete'.$item->id.'"></label>
                                        </div>
                                    </div>
                                    <div class="info d-flex justify-content-between">

                                        <span>
                                                <i class="icon '.$item->icon.'"></i>
                                            '.$item->menu_name.$item->is_resource.'
                                        </span>

                                        <div class="d-flex justify-content-between">

                                            <form action="'.url("/admin/menu/resource").'" method="POST" class="ajaxForm mr-2 resourceFrom" reload="me" data-title="是否为当前菜单创建资源路由?">
                                                    <input type="hidden" name="_token" value="'.csrf_token().'">
                                                    <input type="hidden" value="'.$item->id.'" name="id">
                                                    <button class="btn-fab btn-fab-sm shadow btn-secondary resource-1" title="创建资源路由">
                                                    <i class="icon-map-signs"></i>
                                                    </button>
                                                    <button class="btn-fab btn-fab-sm shadow btn-success resource-2" title="取消资源路由">
                                                    <i class="icon-map-signs"></i>
                                                    </button>
                                            </form>
                                            <a title="编辑" data-mini="'.url('/admin/menu').'/'.$item->id.'/edit" data-title="编辑菜单" class="btn-fab btn-fab-sm btn-primary shadow text-white mr-2">
                                                <i class="icon-pencil"></i>
                                            </a>

                                            <form  action="'.url('/admin/menu').'/'.$item->id.'" data-dangermode="true" data-right="删除" method="POST" class="ajaxForm" reload="me" data-title="是否删除?">
                                                <input type="hidden" name="_token" value="'.csrf_token().'">
                                                <input type="hidden" name="_method" value="delete">
                                                <button class="btn-fab btn-fab-sm shadow btn-danger" title="删除">
                                                <i class="icon-delete"></i>
                                                </button>
                                            </form>
                                        </div>
                                    
                                    </div>
                                </div>
                                '.$child.'
                            </li>
                        ';
                    }
                }
                return $html;
            }
            
            echo recursion($pageListData);

        @endphp
    </ul>


<div class="tree">
      

     

        <ul id="tree0"></ul>

        <script>

            //遍历含有资源控制器菜单 更改按钮
            $(".menu-list li").each(function(){
                var resources=$(this).children('ul').children('.is_resource1');
                //当前菜单下是会否有资源菜单
                if(resources.length>0){
                    $(this).addClass('has_resource');
                    resources.remove();
                    //当前已有资源路由，更改按钮的提交地址和提示信息
                    var resourceForm=$(this).children('.menu-c').children('.info').children('div').children('.resourceFrom');
                    resourceForm.attr('action',"{{url('/admin/menu/cancelResource')}}");
                    resourceForm.data('title','是否取消当前菜单资源路由?').data('dangermode',true);
                }
                //当前菜单下是否有子菜单
                if($(this).children('ul').children('li').length>0){
                    $(this).addClass('hasChild');
                }
            });

            //点击展开
            $(".info").click(function(){
                preventBubble();
                var li=$(this).parent().parent();
                var ul=li.children('ul');
                if(ul.is(':hidden')){
                    li.addClass('on').children('ul').slideDown();
                }else{
                    li.removeClass('on').children('ul').slideUp();
                }
            }); 

           

            // 以下为旧版本JS生成树菜单

            // var treeData=@json($pageListData);
            // treeData.forEach(function(v){
            //     var has_parent=$("ul#tree"+v['pid']);
            //     if(has_parent.length>0){
            //         if($("ul#tree"+v['pid']).length>0&&!v['is_resource']){
            //             $("ul#tree"+v['pid']).siblings('.tree-c').addClass('tree-ul');
            //         }
            //         if(v['is_resource']){
            //             $("ul#tree"+v['pid']).siblings('.tree-c').addClass('resource');
            //             //取消资源路由
            //             $("ul#tree"+v['pid']).siblings('.tree-c').find('.resourceFrom').data('title','是否取消当前菜单资源路由?').data('dangermode',true);
            //             $("ul#tree"+v['pid']).siblings('.tree-c').find('.resourceFrom').attr('action',"{{url('/admin/menu/cancelResource')}}")
                       
            //         }else{
            //             var li=document.createElement('li');
            //             li.className="d-flex";
            //             var div=document.createElement('div');
            //             div.className="d-flex align-items-center";
            //             div.style="padding-left:"+(v['level']-1)*30+"px;width:50%";

            //             //checkbox
            //             var checkbox=document.createElement('div');
            //             checkbox.className="tree-checkbox"
            //             checkbox.style="margin-top:20px;margin-left:20px;";
            //             checkbox.innerHTML='<div class="custom-control custom-checkbox" style="top:-16px"><input type="checkbox" id="delete'+v.id+'" menuName="'+v.menu_name+'" class="custom-control-input"><label class="custom-control-label" for="delete'+v.id+'" ></label></div>';

                       
            //             //icon
            //             var i=document.createElement('i');
            //             i.className="icon "+v['icon'];
            //             div.appendChild(i);
            //             //menu_name
            //             var span=document.createElement('span');
            //             span.innerHTML=v['menu_name'];

            //             div.appendChild(span);

            //             //child
            //             var ul=document.createElement('ul');
            //             ul.id="tree"+v['id']

            //             //box
            //             var treeC=document.createElement('div');

            //             treeC.className="tree-c";
            //             //right control
            //             var control=document.createElement('div');
            //             control.className="d-flex op"
            //             control.innerHTML='<form action="{{url('/admin/menu/resource')}}" method="POST" class="ajaxForm mr-2 resourceFrom" reload="me" data-title="是否为当前菜单创建资源路由?">'+
            //             '        @csrf'+
            //             '        <input type="hidden" value="'+v['id']+'" name="id">'+
            //             '        <button class="btn-fab btn-fab-sm shadow btn-secondary resource-1" title="创建资源路由"><i class="icon-map-signs"></i></button>'+
            //             '        <button class="btn-fab btn-fab-sm shadow btn-success resource-2" title="创建资源路由"><i class="icon-map-signs"></i></button>'+
            //             '    </form>'+
            //             '    <a title="编辑" data-mini="{{url('/admin/menu')}}/'+v.id+'/edit"  data-title="编辑菜单" class="btn-fab btn-fab-sm btn-primary shadow text-white mr-2"><i class="icon-pencil"></i></a>'+
            //             '    <form action="{{url('/admin/menu')}}/'+v.id+'"  data-dangermode="true"  data-right="删除" method="POST" class="ajaxForm" reload="me" data-title="是否删除?">'+
            //             '        @csrf'+
            //             '        @method('delete')'+
            //             '        <button class="btn-fab btn-fab-sm shadow btn-danger" title="删除"><i class="icon-delete"></i></button>'+
            //             '    </form>';
                        
            //             treeC.appendChild(div)
            //             treeC.appendChild(control);
                        
            //             var rightContent=document.createElement('div');
            //             rightContent.className="right-content";
            //             rightContent.style="width:100%";
                        
            //             rightContent.appendChild(treeC);
            //             rightContent.appendChild(ul);

            //             li.appendChild(checkbox);

            //             li.appendChild(rightContent);

            //             $("ul#tree"+v['pid']).append(li.outerHTML);
            //         }
                   
            //     }
            // });

            // //隐藏所有子菜单
            // $("#tree0 ul").hide();
            // //展开菜单
            // $("#tree0 .right-content").click(function(){
            //     preventBubble();
            //     var child_ul=$(this).children('ul');
            //     if(child_ul.is(':hidden')){
            //         $(this).children("div").addClass("on").removeClass("off");
            //         $(this).children("ul").slideDown();
            //     }else{
            //         $(this).children("div").addClass("off").removeClass("on");
            //         $(this).children("ul").slideUp();
            //     };
            // });
            
            // //单选 
            // $(".tree-checkbox").click(function(){
            //     preventBubble();
            // });
            // //已选 汇总
            // $(".tree-checkbox input").change(function(){
            //     preventBubble();
            //     var ids=[],names=[];
            //     $(".tree-checkbox input:checked").each(function(){
            //        ids.push($(this).attr('id').replace('delete',''));
            //        names.push($(this).attr('menuName'));
            //     });
            //     $(".deleteIds").val(ids);
            //     $(".deleteNames").val(names);
            // });


            
        </script>
    </div>